﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>
        Vue Calendar
    </title>
    <meta charset="utf-8" />
    <link href="bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="bootstrap/animate.css" rel="stylesheet" />
    <link href="bootstrap/fontawesome/css/fontawesome.min.css" rel="stylesheet" />
    <link href="bootstrap/inspinia.css" rel="stylesheet" />
    <link href="bootstrap/datapicker/datepicker3.css" rel="stylesheet">


</head>
<body>
    <div id="app" style="margin:20px;">

        <h1>Date</h1>
        <div class="row">
            <div class="col-sm-3">
                <div class="form-group" id="data_1">
                    <label class="font-noraml">Simple data input format</label>
                    <div class="input-group date" @click="expend" :id="aid">
                        <input type="text" class="form-control" value="03/05/2020">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="form-group" id="data_1">
                    <label class="font-noraml">Simple data input format "yyyy-MM-dd": {{date}}</label>
                    <datepicker v-model="date"></datepicker>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="form-group" id="data_1">
                    <label class="font-noraml">Simple data input format "yyyy-MM-dd HH:mm:ss": {{date2}}</label>
                    <datepicker v-model="date2" format="yyyy-MM-dd HH:mm:ss"></datepicker>
                </div>
            </div>

        </div>

        <div :id="bid" class="datepicker datepicker-dropdown dropdown-menu datepicker-orient-left datepicker-orient-top" :style="expendstyle">

            <div class="datepicker-days" style="display: block;">



                <table class=" table-condensed">
                    <!--<thead>
                                        <tr><th class="prev" style="visibility: visible;">«</th><th colspan="5" class="datepicker-switch">February 1990</th><th class="next" style="visibility: visible;">»</th></tr>
                    <tr>
                        <th class="dow">Su</th>
                        <th class="dow">Mo</th>
                        <th class="dow">Tu</th>
                        <th class="dow">We</th>
                        <th class="dow">Th</th>
                        <th class="dow">Fr</th>
                        <th class="dow">Sa</th>
                    </tr>
                            </thead>-->
                    <tbody>
                        <tr>
                            <td class="old day">28</td>
                            <td class="old day">29</td>
                            <td class="old day">30</td>
                            <td class="old day">31</td>
                            <td class="day">1</td>
                            <td class="day">2</td>
                            <td class="day">3</td>
                        </tr>
                        <tr><td class="day">4</td><td class="day">5</td><td class="day">6</td><td class="day">7</td><td class="day">8</td><td class="day">9</td><td class="day">10</td></tr>
                        <tr><td class="day">11</td><td class="day">12</td><td class="day">13</td><td class="day">14</td><td class="day">15</td><td class="day">16</td><td class="day">17</td></tr>
                        <tr><td class="day">18</td><td class="day">19</td><td class="day">20</td><td class="day">21</td><td class="day">22</td><td class="day">23</td><td class="day">24</td></tr>
                        <tr><td class="day">25</td><td class="day">26</td><td class="day">27</td><td class="day">28</td><td class="new day">1</td><td class="new day">2</td><td class="new day">3</td></tr>
                        <tr><td class="new day">4</td><td class="new day">5</td><td class="new day">6</td><td class="new day">7</td><td class="new day">8</td><td class="new day">9</td><td class="new day">10</td></tr>
                    </tbody>
                    <tfoot><tr><th colspan="7" class="today" style="display: table-cell;">Today</th></tr><tr><th colspan="7" class="clear" style="display: none;">Clear</th></tr></tfoot>
                </table>
            </div>

            <div class="datepicker-months" style="display: none;">
                <table class="table-condensed">
                    <thead>
                        <tr>
                            <th class="prev" style="visibility: visible;">«</th>
                            <th colspan="5" class="datepicker-switch">1990</th>
                            <th class="next" style="visibility: visible;">»</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td colspan="7">
                                <span class="month">Jan</span><span class="month">Feb</span><span class="month">Mar</span><span class="month">Apr</span><span class="month">May</span>
                                <span class="month">Jun</span><span class="month">Jul</span><span class="month">Aug</span><span class="month">Sep</span><span class="month">Oct</span><span class="month">Nov</span>
                                <span class="month">Dec</span>
                            </td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr><th colspan="7" class="today" style="display: table-cell;">Today</th></tr>
                        <tr>
                            <th colspan="7" class="clear" style="display: none;">Clear</th>
                        </tr>
                    </tfoot>
                </table>
            </div><div class="datepicker-years" style="display: none;">
                <table class="table-condensed">
                    <thead>
                        <tr>
                            <th class="prev" style="visibility: visible;">«</th>
                            <th colspan="5" class="datepicker-switch">1990-1999</th>
                            <th class="next" style="visibility: visible;">»</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td colspan="7">
                                <span class="year old">1989</span><span class="year">1990</span><span class="year">1991</span><span class="year">1992</span><span class="year">1993</span><span class="year">1994</span><span class="year">1995</span><span class="year">1996</span><span class="year">1997</span><span class="year">1998</span><span class="year">1999</span><span class="year new">2000</span>
                            </td>
                        </tr>
                    </tbody>
                    <tfoot><tr><th colspan="7" class="today" style="display: table-cell;">Today</th></tr><tr><th colspan="7" class="clear" style="display: none;">Clear</th></tr></tfoot>
                </table>
            </div>
        </div>


    </div>

    <script src="scripts/floating.layer.js"></script>
    <script src="scripts/vue.min.js"></script>
    <script src="scripts/components/datepicker.js"></script>
    <script src="scripts/components/datepicker.days.js"></script>
    <script src="scripts/components/datepicker.dropdown.js"></script>
    <script>

        new Vue({
            el: '#app',
            data: {
                date: "2020-05-04",
                date2: "2020-05-04 23:45:34",
                aid: "",
                bid: "",
                position: { top: 0, left: 0 },
                expendstyle: "",
                container: {},
            },
            mounted() {
                this.init();
            },
            methods: {
                init: function () {
                    this.aid = FLOATING_LAYER.guid();
                    this.bid = FLOATING_LAYER.key + this.aid;
                    FLOATING_LAYER.list.push(this.aid);
                },
                expend: function ($event) {
                    if ($event != undefined) {
                        $event.stopPropagation();
                    }
                    var picker = $event.currentTarget;
                    var height = picker.offsetHeight;
                    var offset = FLOATING_LAYER.getElementOffSet(picker);
                    this.expendstyle = "z-index:10;top:" + (offset.top + height) + "px;left:" + (offset.left + 5) + "px;";

                    var datepicker = document.getElementById(this.bid);
                    datepicker.style.display = "block";
                }
            }
        });
               
    </script>
</body>
</html>
